<template>
	<view class="warp">
		<!-- 自定义顶部导航栏开始 -->
		<u-navbar :border-bottom="false" :is-back="false" :background="background">
			<view class="slot-wrap">
				<!-- 导航内容 -->
				<u-search @click='toSearch' :disabled="true" bg-color="#C8C8C8" search-icon-color="#fff"
					placeholder-color="#fff" placeholder="搜日记 搜人 搜话题" margin="10rpx" :show-action="false"></u-search>
				<u-icon name="bell" color="#fff" size="44" @click="toNotice"></u-icon>
				<u-badge type="warning" :count="newMsgFlag" :offset="offset" is-dot></u-badge>
			</view>
		</u-navbar>
		<!-- 自定义顶部导航栏结束 -->
		<!-- 头部卡片资料开始 -->
		<view class="headerCard">
			<view class="cardAvatar" @click="toMyInfo">
				<u-avatar :src="avatar" mode="square" size="180"></u-avatar>
			</view>
			<view class="cardUserInfo">
				<view class="userName">
					<text>{{userName}}</text>
				</view>
				<view class="userGrade">
					<text>所在年级：{{classId}}</text>
				</view>
			</view>
			<view class="cardDz">
				<view class="dzTag" @click="toDiscuss">
					<text>更新日记</text>
				</view>
				<view class="dzNum">
					<text>获赞 {{counselor}}</text>
				</view>
			</view>
		</view>
		<!-- 头部卡片资料结束 -->
		<!-- 个人日记板块开始 -->
		<view class="userLog">
			<view class="logTitle">
				<text>日记最新动态</text>
			</view>
			<commonBox :userAvatar="avatar" :imgUrl="contentUrl" :tagName="firstDiary.diaryType" :headerShow="true" :content="firstDiary.diaryDesc" ></commonBox>
			<!--没有日志时显示 -->
			<!-- <view class="logNull" v-else>
				<view class="logImg">
					<image src="/static/jzqImgs/null.png" mode=""></image>
				</view>
				<view class="logBtn">
					<text>暂无日记，快去更新吧</text>
				</view>
			</view> -->

		</view>
		<u-gap height="10" bg-color="#ccc"></u-gap>
		<!-- 个人日记板块结束 -->
		<!-- 日记模块开始 -->
		<view class="recommend">
			<!-- 推荐导航结束 -->
			<view class="tagRecommend" style="width: 240rpx;">
				<u-tabs active-color="#101010" inactive-color="#a8a8a8" :show-bar="false" font-size="32"
					:list="recommendList" :is-scroll="false" :current="current" @change="change"></u-tabs>
			</view>
			<!-- 推荐导航开始 -->
			<commonBox :dianzanName="item.uid" :messageName="item.likeNum" :tagName="item.diaryType"
				:userName="userName" :imgUrl="item.imgUrl" :content="item.diaryDesc" :userAvatar="avatar"
				:headerShow="true" v-for="(item,index) in recomendData" :key="index"></commonBox>
		</view>
		<!-- 日记模块结束 -->
		<!-- 发布按钮开始 -->
		<view class="fabu" @click="toFabu">
			<view class="fabuImg">
				<image src="../../static/jzqIcon/fabuIcon.png" mode=""></image>
			</view>
			<view class="fabuTitle">
				<text>发布</text>
			</view>
		</view>
		<!-- 发布按钮结束 -->
		<!-- 顶部自定义导航开始 -->
		<u-tabbar v-model="current" :list="list"></u-tabbar>
		<!-- 顶部自定义导航结束 -->
	</view>
</template>

<script>
	import {
		request
	} from "../../util/api";
	import {
		TOAST
	} from "../../util/util";
	import commonBox from "../../components/commonLogBox"
	import commonLogContainer from "../../components/commonLogContainer"
	export default {
		components: {
			commonLogContainer,
			commonBox
		},
		data() {
			return {
				// 用户Id
				contentUrl:"",
				headerShow:true,
				content:'',
				userId:"",
				// 未读消息
				newMsgFlag:"",
				// 获赞
				counselor:"",
				// 所处年级
				classId:"",
				userName: "",
				// 日记最新动态数据
				firstDiary: [],
				recomendData: [],
				id: 1,
				recommendList: [{
						name: "推荐"
					},
					{
						name: "最新"
					},
					{
						name: "关注"
					}
				],
				url: "/pages/ischoolQZ/fabu/fabu",
				background: {
					backgroundColor: "#255584"
				},
				// 角标偏移数组
				offset: [18, -1],
				// 头像信息
				avatar: "",
				// 自定义导航数据
				list: [{
						iconPath: "/static/jzqIcon/home.png",
						selectedIconPath: "/static/jzqIcon/homeActive.png",
						text: '首页',
					},
					{
						iconPath: "/static/jzqIcon/isScholl.png",
						selectedIconPath: "/static/jzqIcon/isSchollActive.png",
						text: '家长圈',

					},
					{
						iconPath: "/static/jzqIcon/discover.png",
						selectedIconPath: "/static/jzqIcon/discoverActive.png",
						text: '探索',
						customIcon: false,
					},
					{
						iconPath: "/static/jzqIcon/my.png",
						selectedIconPath: "/static/jzqIcon/myActive.png",
						text: '我的',
					},
				],
				current: 0,
				showChange: 0,
			};
		},
		// 页面加载时
		onLoad() {
			this.getlist()
			this.getRecommendList()
		},
		methods: {
			getlist() {
				// 获取家长圈用户信息
				request({
					url: '/system/CompassDiary/getHeadDiary',
					method: "get",
				}).then(res => {
					const userData = res.data.compassNormalUser
					this.userName = userData.userName
					this.avatar = userData.avatar
					this.firstDiary = res.data.firstDiary
					this.classId=userData.classId
					this.counselor=userData.counselor
					this.newMsgFlag=res.data.newMsgFlag
					this.userId=userData.userId
					this.contentUrl=res.data.firstDiary.fileList[0].fileUrl
					uni.setStorageSync("userId",this.userId)
					uni.setStorageSync("userAvatar",this.avatar)
					uni.setStorageSync("userName",this.userName)
				})
			},
			// 获取推荐信息
			getRecommendList() {
				request({
					url: '/system/CompassDiary/wxList/1',
					method: "get",
				}).then(res => {
					this.recomendData = res.rows
					console.log(res)
				})
			},
			// 改变推荐类型
			change(index) {
				this.current = index
				const id = this.current + 1
				request({
					url: '/system/CompassDiary/wxList/' + id,
					method: "get",
				}).then(res => {
					this.recomendData = res.rows
				})

			},
			toSearch() {
				uni.navigateTo({
					url: "/pages/ischoolQZ/search/search"
				})
			},
			// 跳转到消息页面
			toNotice() {
				uni.navigateTo({
					url: "/pages/ischoolQZ/notice/notice"
				})
			},
			// 跳转到个人首页
			toMyInfo() {
				uni.navigateTo({
					url: "/pages/ischoolQZ/myInfo/myInfo"
				})
			},
			toFabu() {
				uni.navigateTo({
					url: "/pages/ischoolQZ/fabu/fabu"
				})
			},
			// 跳转到详情页
			toDetail(id) {
				console.log(id)
			},
			// 跳转到更新日志页面
			toDiscuss() {
				uni.navigateTo({
					url: "/pages/ischoolQZ/discuss/discuss"
				})
			}


		}
	}
</script>

<style lang="scss" scoped>
	.logNull {
		.logImg {
			text-align: center;

			image {
				width: 292rpx;
				height: 292rpx;
			}
		}

		.logBtn {
			height: 92rpx;
			width: 100%;
			line-height: 92rpx;
			text-align: center;
			background-color: #2A6CAC;
			color: #FFFFFF;
			border-radius: 50rpx;
			margin: 20rpx 0;
			font-size: 36rpx;
			font-weight: bold;
		}

	}

	.warp {
		position: relative;

		// 自定义导航栏样式
		.slot-wrap {
			display: flex;
			align-items: center;
			position: relative;
		}

		// 头部资料卡片样式
		.headerCard {
			height: 260rpx;
			padding: 20rpx;
			background-image: url(../../static/jzqImgs/headerBg.png);
			display: flex;
			align-items: center;
			justify-content: space-between;
			color: #FFFFFF;

			.cardUserInfo {
				flex: 1;
				margin-left: 10rpx;

				.userName {
					font-size: 40rpx;
					font-weight: bold;
					margin-bottom: 10rpx;
				}

				.userGrade {
					font-size: 28rpx;
					font-weight: bold;
				}
			}

			.cardDz {
				display: flex;
				flex-direction: column;
				align-items: center;

				.dzTag {
					width: 148rpx;
					height: 62rpx;
					background-color: #2A6CAC;
					line-height: 62rpx;
					text-align: center;
					font-weight: bold;
					margin-bottom: 10rpx;
				}
			}
		}

		// 个人日记板块样式
		.userLog {
			margin-top: 40rpx;
			padding: 0 34rpx;

			.logTitle {
				font-size: 32rpx;
				font-weight: bold;
			}

			.logTag {
				margin: 22rpx 0;
				background-color: #EBEBEB;
				height: 52rpx;
				width: 196rpx;
				line-height: 52rpx;
				text-align: center;
				border-radius: 26rpx;

				.tagIcon {
					height: 32rpx;
					width: 32rpx;
					padding: 5rpx 10rpx;
					border-radius: 50%;
					color: #FFFFFF;
					background-color: #255584;
				}

				text {
					margin-left: 5rpx;
				}
			}

			.logContent {
				position: relative;

				.contentDetail {
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 3;
					-webkit-box-orient: vertical;
				}

				.more {
					position: absolute;
					top: 76rpx;
					right: 80rpx;
					color: #2A6CAC;
				}

				.ContentImgs {
					margin: 20rpx 0;
				}
			}
		}

		.recommend {
			padding: 20rpx 34rpx;

			.recommend {
				.tagRecommend {
					width: 240rpx;
				}
			}
		}

		.fabu {
			position: fixed;
			top: 1000rpx;
			right: 28rpx;
			bottom: 40rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 120rpx;
			border-radius: 50%;
			height: 120rpx;
			background-color: #2A6CAB;

			.fabuImg {
				image {
					width: 52rpx;
					height: 52rpx;
				}

			}

			.fabuTitle {
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
